<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>首页</title>
		<script src="../js/header.js"></script>
		<link rel="stylesheet" type="text/css" href="../css/sy.css">
	</head>
	<body>
		<div v-cloak id="app_index">
			<el-row :span="24" style="overflow: hidden;margin: 0;">
				<el-col :span="24" class="jichu">
					<el-row style="border: 0px solid #DEE3EE;padding-top: 10px;padding-bottom: 10px;border-top: 3px solid #0D9AFF;">
						<el-col class="tab-title" style="height: 25px;border-left: 4px solid #0D9AFF;margin-left: 15px;">
							<span style="vertical-align: middle;">基础事项</span>
						</el-col>
					</el-row>
					<el-row>
						<el-col style="height: 215px;">
							<el-row :gutter="20" style="padding-left: 30px;">
								<el-col :span="5">
									<div class="list-style">
										<span class="list-num"style="position: absolute; text-align: right; top: -10px;">{{ basicMatter.matters.num }}</span>
										<span class="list-font" style="position: relative; bottom: -15px;">{{ basicMatter.matters.name }}</span>
										<img :src="basicMatter.matters.img" style="position: absolute; top: 30px;"/>
									</div>
								</el-col>
								<el-col :span="5">
									<div class="list-style">
										<span class="list-num"style="position: absolute; text-align: right; top: -10px;">{{ basicMatter.object.num }}</span>
										<span class="list-font" style="position: relative; bottom: -15px;">{{ basicMatter.object.name }}</span>
										<img :src="basicMatter.object.img" style="position: absolute; top: 30px;"/>
									</div>
								</el-col>
								<el-col :span="5">
									<div class="list-style">
										<span class="list-num"style="position: absolute; text-align: right; top: -10px;">{{ basicMatter.behavior.num }}</span>
										<span class="list-font" style="position: relative; bottom: -15px;">{{ basicMatter.behavior.name }}</span>
										<img :src="basicMatter.behavior.img" style="position: absolute; top: 30px;"/>
									</div>
								</el-col>
								<el-col :span="5">
									<div class="list-style">
										<span class="list-num"style="position: absolute; text-align: right; top: -10px;">{{ basicMatter.education.num }}</span>
										<span class="list-font" style="position: relative; bottom: -15px;">{{ basicMatter.education.name }}</span>
										<img :src="basicMatter.education.img" style="position: absolute; top: 30px;"/>
									</div>
								</el-col>
							</el-row>
						</el-col>
					</el-row>
				</el-col>
				<el-col :span="24" style=":height=(setHeight/3*2) px;">
					<el-row>
						<el-col class="tab-title" style="padding-bottom: 15px;border-bottom: 1px solid #ddd;">
							<img src="../images/sy/数据统计.png" style="vertical-align: middle;" />
							<span style="vertical-align: middle;">数据统计</span>
						</el-col>
						<el-col>
							<el-row>
								<el-col :span="10" style="padding-top:  30px;padding-left: 30px;">
									<span>年度:</span>
									<el-date-picker
										v-model="fileYear"
										type="year"
										placeholder="请选择"
										format="yyyy"
										value-format="yyyy"
										@change="changeYear">
									</el-date-picker>
								</el-col>
								<el-col :span="14" style="padding-top:  30px;">
									<el-button-group>
										<el-button v-for="(item,index) in Tabsbtn" class="btn" :class="{ active: selectedBtn == index }" @click="changeWidth(index)">{{ item.btnname }}</el-button>
										<!--<el-button class="btn" :class="{ active: selectedBtn == 0 }" @click="selectedBtn = 0;">地图展示</el-button>
										<el-button class="btn" :class="{ active: selectedBtn == 1 }" @click="selectedBtn = 1;zzbehaviorbarChart();">图表展示</el-button>
										<el-button class="btn" :class="{ active: selectedBtn == 2 }" @click="selectedBtn = 2;pieChart();">柱状展示 </el-button>-->
									</el-button-group>
								</el-col>
								<el-col>
									<div class="el-tab-pane">
										<div class="content" id="main" v-show="selectedBtn == 0"></div>
									</div>
									<div class="el-tab-pane" v-show="selectedBtn == 1">
										<el-row style="border: 0px solid #DEE3EE;padding-top: 10px;padding-bottom: 10px;">
											<el-col class="tab-title" style="height: 25px;border-left: 4px solid #0D9AFF;margin-left: 15px;">
												<span style="vertical-align: middle;">综合分析结果</span>
											</el-col>
										</el-row>
										<el-row :gutter="20" type="flex" style="padding-left: 30px;">
											<el-col :span="5">
												<div class="list-style">
													<span class="list-num"style="position: absolute; text-align: right; top: -10px;">{{ basicMatter.matters.num }}</span>
													<span class="list-font" style="position: relative; bottom: -15px;">监管行为（次）</span>
													<!--<img :src="basicMatter.matters.img" style="position: absolute; top: 30px;"/>-->
												</div>
											</el-col>
											<el-col :span="5">
												<div class="list-style">
													<span class="list-num"style="position: absolute; text-align: right; top: -10px;">{{ basicMatter.object.num }}</span>
													<span class="list-font" style="position: relative; bottom: -15px;">{{ basicMatter.object.name }}</span>
													<!--<img :src="basicMatter.object.img" style="position: absolute; top: 30px;"/>-->
												</div>
											</el-col>
											<el-col :span="5">
												<div class="list-style">
													<span class="list-num"style="position: absolute; text-align: right; top: -10px;">{{ basicMatter.behavior.num }}</span>
													<span class="list-font" style="position: relative; bottom: -15px;">本月推送监管行为（次）</span>
													<!--<img :src="basicMatter.behavior.img" style="position: absolute; top: 30px;"/>-->
												</div>
											</el-col>
										</el-row>
										<el-row type="flex" justify="center" style="margin-top: 20px;">
											<el-tabs v-model="tbactiveName" @tab-click="tbhandleClick" style="width: 95%">
											    <el-tab-pane label="监管行为" name="1">
											    	<div class="content" id="behaviorpiechart" style="width: 1530px;height: 500px;"></div>
											    </el-tab-pane>
											    <el-tab-pane label="监管对象" name="2">
											    	<div class="content" id="objectpiechart" style="width: 1530px;height: 500px;"></div>
											    </el-tab-pane>
											    <el-tab-pane label="宣传教育" name="3">
											    	<div class="content" id="teachpiechart" style="width: 1530px;height: 500px;"></div>
											    </el-tab-pane>
											    
										  	</el-tabs>
										</el-row>
										
									</div>
									<div class="el-tab-pane" v-show="selectedBtn == 2">
										<el-row style="border: 0px solid #DEE3EE;padding-top: 10px;padding-bottom: 10px;">
											<el-col class="tab-title" style="height: 25px;border-left: 4px solid #0D9AFF;margin-left: 15px;">
												<span style="vertical-align: middle;">综合分析结果</span>
											</el-col>
										</el-row>
										<el-row :gutter="20" type="flex" style="padding-left: 30px;">
											<el-col :span="5">
												<div class="list-style">
													<span class="list-num"style="position: absolute; text-align: right; top: -10px;">{{ basicMatter.matters.num }}</span>
													<span class="list-font" style="position: relative; bottom: -15px;">监管行为（次）</span>
													<!--<img :src="basicMatter.matters.img" style="position: absolute; top: 30px;"/>-->
												</div>
											</el-col>
											<el-col :span="5">
												<div class="list-style">
													<span class="list-num"style="position: absolute; text-align: right; top: -10px;">{{ basicMatter.object.num }}</span>
													<span class="list-font" style="position: relative; bottom: -15px;">{{ basicMatter.object.name }}</span>
													<!--<img :src="basicMatter.object.img" style="position: absolute; top: 30px;"/>-->
												</div>
											</el-col>
											<el-col :span="5">
												<div class="list-style">
													<span class="list-num"style="position: absolute; text-align: right; top: -10px;">{{ basicMatter.behavior.num }}</span>
													<span class="list-font" style="position: relative; bottom: -15px;">本月推送监管行为（次）</span>
													<!--<img :src="basicMatter.behavior.img" style="position: absolute; top: 30px;"/>-->
												</div>
											</el-col>
										</el-row>
										<el-row type="flex" justify="center" style="margin-top: 20px;">
											<el-tabs v-model="zzactiveName" @tab-click="zzhandleClick" style="width: 95%">
											    <el-tab-pane label="监管行为" name="1">
											    	<div class="content" id="zzbehaviorbarChart" style="width:1530px;height: 500px;"></div>										    	
											    </el-tab-pane>
											    <el-tab-pane label="监管对象" name="2">
											    	<div class="content" id="zzobjectbarChart" style="width:1530px;height: 500px;"></div>
											    </el-tab-pane>
											    <el-tab-pane label="宣传教育" name="3">
											    	<div class="content" id="zzteachbarChart" style="width:1530px;height: 500px;"></div>
											    </el-tab-pane>
											    
										  	</el-tabs>
										</el-row>
										
									</div>
								</el-col>
							</el-row>
						</el-col>
					</el-row>
				</el-col>
			</el-row>

			<el-dialog title=""	:visible.sync="dialogTableVisible" center="true" width="45%">
				<div>
					<el-row>
						<el-col style="height: 30px;text-align: center;font-size: 20px;font-weight: bold;">{{ city.cityName }}</el-col>
					</el-row>
					<el-row>
						<el-col style="height: 30px;text-align: center;font-size: 16px;font-weight: bold;">累计数与占全国比例</el-col>						
					</el-row>
					<el-row :gutter="50" type="flex" justify="center" style="margin-top: 30px;">
						<el-col :span="8" style="text-align: center;">
							<div style="padding: 10px 0;font-size: 16px;font-weight: bold;">监管对象（项）</div>
							<div style="padding: 10px 0;font-size: 16px;font-weight: bold;">2500</div>
							<div style="font-size: 16px;font-weight: bold;">25%</div>
							
						</el-col>
						<el-col :span="8" style="text-align: center;">
							<div style="padding: 10px 0;font-size: 16px;font-weight: bold;">监管行为（次）</div>
							<div style="padding: 10px 0;font-size: 16px;font-weight: bold;">3200</div>
							<div style="font-size: 16px;font-weight: bold;">32%</div>
							
						</el-col>
						<el-col :span="8" style="text-align: center;">
							<div style="padding: 10px 0;font-size: 16px;font-weight: bold;">宣传教育（次）</div>
							<div style="padding: 10px 0;font-size: 16px;font-weight: bold;">4300</div>
							<div style="font-size: 16px;font-weight: bold;">{{(33/55* 100)| numFilter }}%</div>
							
						</el-col>
					</el-row>
				</div>
			</el-dialog>
		</div>
	</body>
	<script>
		var sy = new Vue({
			el: '#app_index',
            data() {
                return {
				    fileYear: '',
                    dialogTableVisible: false,
                    city: {
                        cityName: '',
                        cityNum: 212312,
                        cityObject: 12332, // 监管对象数据
                        cityAction: 3242, // 监管行为数据
                        cityEducation: 123, // 宣传教育数据
                        cityCounts:0,
                        cityTotal:0,
                    },
                    tbactiveName: '1',
                    zzactiveName: '1',
                    basicMatter: {
                        matters: {
                            num: '',
                            name: '监管事项（项）',
                            img: appBaseUrl + '/images/sy/监管事项.png'
                        },
                        object: {
                            num: '',
                            name: '监管对象（个）',
                            img: appBaseUrl + '/images/sy/监管对象.png'
                        },
                        behavior: {
                            num: '',
                            name: '监管行为（次）',
                            img: appBaseUrl + '/images/sy/监管行为.png'
                        },
                        education: {
                            num: '',
                            name: '宣传教育（次）',
                            img: appBaseUrl + '/images/sy/宣传教育.png'
                        }
                    },
                    Tabsbtn: [
                        {
                            btnname: '地图展示'
                        },
                        {
                            btnname: '图表展示'
                        },
                        {
                            btnname: '柱状展示'
                        }
                    ],
                    selectedBtn: '0', // 被选中的btn
                    tabItem: 'heart'
                }
            },
            filters: {
                numFilter(value) {
                    // 截取当前数据到小数点后两位
                    let realVal = parseFloat(value).toFixed(2)
                    return realVal;
                }
            },
            mounted() {
				this.getData();
                this.mapFn();
				/*this.pieChart();
                this.zzbehaviorbarChart();*/

                var myChart = echarts.init(document.getElementById('main'));
               

                window.onresize = () => {
                    myChart.resize();
                    
                }


            },
            watch: {
                //监控浏览器高度变化
                winHeight(val) {
                    this.setHeight = val + 'px';
                }
            },
            methods: {
				getData(){
					axios({
						method: 'get',
						url: appBaseUrl + '/getTotal/getCount',
					}).then(response=> {
						let data = response.data;
						if (data.code == 200) {
							this.basicMatter.matters.num = data.totalCount;
							this.basicMatter.behavior.num = data.behCount;
							this.basicMatter.object.num = data.objCount;
							this.basicMatter.education.num = data.eduCount;
						} else {
							this.$message.error(data.msg);
						}
					}).catch(function(error) {
						console.log(error);
					});

					let date=new Date();
					let year=date.getFullYear().toString();
					this.fileYear=year;
				},
                mapFn() {
                	var dataList;
                    var myChart = echarts.init(document.getElementById('main'));
                    var $this = this;
					axios({
						method: 'get',
						url: appBaseUrl + '/getTotal/map',
						params:{
							year:$this.fileYear
						}
					}).then(response => {
						let data = response.data;
						console.log(data);
						if (data.code == 200) {
							dataList = JSON.parse(data.data);
							
							$this.city.cityTotal = JSON.parse(data.cityTotal);
							$this.city.cityNum=JSON.parse(data.cityTotal);
							myChart.setOption({
								tooltip: {
									formatter: function(params) {
										console.log(params)
//										if (params.value) {
											return 	'<div style="width:450px;">'+
														
															'<div style="margin-top:10px;height: 30px;text-align: center;font-size: 20px;font-weight: bold;">'+params.data.name+'</div>'+
														
														
															'<div style="text-align: center;font-size: 16px;font-weight: bold;">累计数与占全国比例</div>'+						
														
														'<el-row :gutter="50" style="margin: 20px 0;display: flex;justify-content: center;align-items: center;">'+
															'<el-col :span="8" style="text-align: center;display: inline-block;">'+
																'<div style="padding: 10px 0;font-size: 16px;font-weight: bold;">监管对象（项）</div>'+
																'<div style="padding: 10px 0;font-size: 16px;font-weight: bold;">2500</div>'+
																'<div style="font-size: 16px;font-weight: bold;">25%</div>'+
																
															'</el-col>'+
															'<el-col :span="8" style="text-align: center;display: inline-block;margin:0 20px;">'+
																'<div style="padding: 10px 0;font-size: 16px;font-weight: bold;">监管行为（次）</div>'+
																'<div style="padding: 10px 0;font-size: 16px;font-weight: bold;">3200</div>'+
																'<div style="font-size: 16px;font-weight: bold;">32%</div>'+
																
															'</el-col>'+
															'<el-col :span="8" style="text-align: center;display: inline-block;">'+
																'<div style="padding: 10px 0;font-size: 16px;font-weight: bold;">宣传教育（次）</div>'+
																'<div style="padding: 10px 0;font-size: 16px;font-weight: bold;">4300</div>'+
																'<div style="font-size: 16px;font-weight: bold;">'+(30 / 44 * 100).toFixed(2)+'%</div>'+
																
															'</el-col>'+
														'</el-row>'+
													'</div>';
//											return params.seriesName + '<br/>' + params.name + ' : ' + params.data.value+ '<br/>' + params.name + ' : ' + params.data.value1;
//										} else {
//											return params.seriesName + '<br/>' + params.name + ' : ' + '0';
//										}
									} //数据格式化
								},
								visualMap: {
									min: 0,
									max: 1500,
									left: 'left',
									top: 'bottom',
									text: ['高', '低'], //取值范围的文字
									inRange: {
										color: ['#e0ffff', '#006edd'] //取值范围的颜色
									},
									show: false //图注
								},
								geo: {
									map: 'china',
									roam: false, //不开启缩放和平移
									zoom: 1, //视角缩放比例
									label: {
										normal: {
											show: true,
											fontSize: '10',
											color: 'rgba(0,0,0,0.7)'
										}
									},
									itemStyle: {
										normal: {
											borderColor: 'rgba(0, 0, 0, 0.2)'
										},
										emphasis: {
											areaColor: '#F3B329', //鼠标选择区域颜色
											shadowOffsetX: 0,
											shadowOffsetY: 0,
											shadowBlur: 20,
											borderWidth: 0,
											shadowColor: 'rgba(0, 0, 0, 0.5)'
										}
									}
								},
								series: [{
									name: '信息量',
									type: 'map',
									geoIndex: 0,
									data:[{  
									    	"name":"北京",
									        "value":0
									    },
									    {
									        "name":"天津",
									        "value":0
									    },
									    {
									        "name":"上海",
									        "value":0
									    },
									    {
									        "name":"重庆",
									        "value":0
									    },
									    {
									        "name":"河北",
									        "value":0
									    },
									    {
									        "name":"河南",
									        "value":0
									    },
									    {
									        "name":"云南",
									        "value":0
									    },
									    {
									        "name":"辽宁",
									        "value":0
									    },
									    {
									        "name":"黑龙江",
									        "value":0
									    },
									    {
									        "name":"湖南",
									        "value":0
									    },
									    {
									        "name":"安徽",
									        "value":0
									    },
									    {
									        "name":"山东",
									        "value":0
									    },
									    {
									        "name":"新疆",
									        "value":11,
									        "value1":111
									    },
									    {
									        "name":"江苏",
									        "value":0
									    },
									    {
									        "name":"浙江",
									        "value":0
									    },
									    {
									        "name":"江西",
									        "value":0
									    },
									    {
									        "name":"湖北",
									        "value":0
									    },
									    {
									        "name":"广西",
									        "value":0
									    },
									    {
									        "name":"甘肃",
									        "value":0
									    },
									    {
									        "name":"山西",
									        "value":0
									    },
									    {
									        "name":"内蒙古",
									        "value":0
									    },
									    {
									        "name":"陕西",
									        "value":0
									    },
									    {
									        "name":"吉林",
									        "value":0
									    },
									    {
									        "name":"福建",
									        "value":0
									    },
									    {
									        "name":"贵州",
									        "value":0
									    },
									    {
									        "name":"广东",
									        "value":0
									    },
									    {
									        "name":"青海",
									        "value":0
									    },
									    {
									        "name":"西藏",
									        "value":0
									    },
									    {
									        "name":"四川",
									        "value":0
									    },
									    {
									        "name":"宁夏",
									        "value":0
									    },
									    {
									        "name":"海南",
									        "value":0
									    },
									    {
									        "name":"台湾",
									        "value":0
									    },
									    {
									        "name":"香港",
									        "value":0
									    },
									    {
									        "name":"澳门",
									        "value":0
									    }]
								}]
							});
						} else {
							this.$message.error(data.msg);
						}
					}).catch(function(error) {
						console.log(error);
					});
                    window.onresize = () => {
                        myChart.resize();
                    }

                  /*  function randomValue() {
                        return Math.round(Math.random() * 1000);
                    }*/

                /*    myChart.setOption({
                        tooltip: {
                            formatter: function(params) {
                                if (params.value) {
                                    return params.seriesName + '<br/>' + params.name + ' : ' + params.value;
                                } else {
                                    return params.seriesName + '<br/>' + params.name + ' : ' + '0';
                                }
                            } //数据格式化
                        },
                        visualMap: {
                            min: 0,
                            max: 1500,
                            left: 'left',
                            top: 'bottom',
                            text: ['高', '低'], //取值范围的文字
                            inRange: {
                                color: ['#e0ffff', '#006edd'] //取值范围的颜色
                            },
                            show: false //图注
                        },
                        geo: {
                            map: 'china',
                            roam: false, //不开启缩放和平移
                            zoom: 1, //视角缩放比例
                            label: {
                                normal: {
                                    show: true,
                                    fontSize: '10',
                                    color: 'rgba(0,0,0,0.7)'
                                }
                            },
                            itemStyle: {
                                normal: {
                                    borderColor: 'rgba(0, 0, 0, 0.2)'
                                },
                                emphasis: {
                                    areaColor: '#F3B329', //鼠标选择区域颜色
                                    shadowOffsetX: 0,
                                    shadowOffsetY: 0,
                                    shadowBlur: 20,
                                    borderWidth: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        },
                        series: [{
                            name: '信息量',
                            type: 'map',
                            geoIndex: 0,
                            data: dataList
                        }]
                    });*/
                    // 地图点击事件
                    myChart.on('click', function(params) {
                    	console.log(params);
                        $this.dialogTableVisible = true;
                        $this.city.cityName = params.name;
						if(params.value){
							$this.city.cityCounts = params.value;
						}else{
							$this.city.cityCounts = 0;
						}
                    });
                },
                //柱形监管行为
                zzbehaviorbarChart() {
                	var dataCount;
					var $this = this;
                    
					axios({
						method: 'get',
						url: appBaseUrl + '/getTotal/mapyear',
						params:{
							year:$this.fileYear
						}
					}).then(response=>{
						let data=response.data;
					if(data.code == 200){
						dataCount = JSON.parse(data.data);
						var dac = [],xlist = [];
						dataCount.forEach(function(item,index){
							dac.push(item.value);
							xlist.push(item.name);
						})
						var zzbehaviorbarChart = echarts.init(document.getElementById('zzbehaviorbarChart'));
						zzbehaviorbarChart.setOption({
							color: ['#3398DB'],
	//                  	color: ['#003366', '#006699', '#4cabce', '#e5323e'],
	                        tooltip: {
			                    trigger: 'axis',
			                    axisPointer: {
			                        type: 'shadow'
			                    }
			                },
	                        grid: {
	                            left: '5%',
	                            right: '5%',
	                            bottom: '3%',
	                            containLabel: true
	                        },
							xAxis: {
								type: 'category',
		                        axisTick: {show: false},
		                        name: '各局名称',
                            	boundaryGap: [0, 0.01],
		                        axisLabel: {
		                            interval: 0,
		                            rotate: 40
		                        },
								data: xlist
							},
							yAxis: {
	                            show: true,
	                            type: 'value',
	                            name: '数值'
	                            /* //隐藏刻度尺
	                            axisTick: {
	                                show: false
	                            }, */
	                            //隐藏坐标线
	                            /* axisLine: {
	                                show: false,
	                                lineStyle: {
	                                    color: '#000000'
	                                }
	                            }, */
	                        },
							series: [
								{
									name: '监管信息总数',
									type: 'bar',
									data: dac
								}

							]
						});
					}
				})
                    window.onresize = () => {
                        zzbehaviorbarChart.resize();
                    }

                },
                //柱形监管对象
                zzobjectbarChart() {
                	var dataCount;
					var $this = this;
                    
					axios({
						method: 'get',
						url: appBaseUrl + '/getTotal/mapyear',
						params:{
							year:$this.fileYear
						}
					}).then(response=>{
						let data=response.data;
					if(data.code == 200){
						dataCount = JSON.parse(data.data);
						var dac = [],xlist = [];
						dataCount.forEach(function(item,index){
							dac.push(item.value);
							xlist.push(item.name);
						})
						var zzobjectbarChart = echarts.init(document.getElementById('zzobjectbarChart'));
						zzobjectbarChart.setOption({
							color: ['#3398DB'],
	//                  	color: ['#003366', '#006699', '#4cabce', '#e5323e'],
	                        tooltip: {
			                    trigger: 'axis',
			                    axisPointer: {
			                        type: 'shadow'
			                    }
			                },
	                        grid: {
	                            left: '5%',
	                            right: '5%',
	                            bottom: '3%',
	                            containLabel: true
	                        },
							xAxis: {
								type: 'category',
		                        axisTick: {show: false},
		                        name: '各局名称',
                            	boundaryGap: [0, 0.01],
		                        axisLabel: {
		                            interval: 0,
		                            rotate: 40
		                        },
								data: xlist
							},
							yAxis: {
	                            show: true,
	                            type: 'value',
	                            name: '数值'
	                            /* //隐藏刻度尺
	                            axisTick: {
	                                show: false
	                            }, */
	                            //隐藏坐标线
	                            /* axisLine: {
	                                show: false,
	                                lineStyle: {
	                                    color: '#000000'
	                                }
	                            }, */
	                        },
							series: [
								{
									name: '监管信息总数',
									type: 'bar',
									data: dac
								}

							]
						});
					}
				})
                    window.onresize = () => {
                        zzobjectbarChart.resize();
                    }

                },
                //柱形宣传教育
                zzteachbarChart() {
                	var dataCount;
					var $this = this;
                    
					axios({
						method: 'get',
						url: appBaseUrl + '/getTotal/mapyear',
						params:{
							year:$this.fileYear
						}
					}).then(response=>{
						let data=response.data;
					if(data.code == 200){
						dataCount = JSON.parse(data.data);
						var dac = [],xlist = [];
						dataCount.forEach(function(item,index){
							dac.push(item.value);
							xlist.push(item.name);
						})
						var zzteachbarChart = echarts.init(document.getElementById('zzteachbarChart'));
						zzteachbarChart.setOption({
							color: ['#3398DB'],
	//                  	color: ['#003366', '#006699', '#4cabce', '#e5323e'],
	                        tooltip: {
			                    trigger: 'axis',
			                    axisPointer: {
			                        type: 'shadow'
			                    }
			                },
	                        grid: {
	                            left: '5%',
	                            right: '5%',
	                            bottom: '3%',
	                            containLabel: true
	                        },
							xAxis: {
								type: 'category',
		                        axisTick: {show: false},
		                        name: '各局名称',
                            	boundaryGap: [0, 0.01],
		                        axisLabel: {
		                            interval: 0,
		                            rotate: 40
		                        },
								data: xlist
							},
							yAxis: {
	                            show: true,
	                            type: 'value',
	                            name: '数值'
	                            /* //隐藏刻度尺
	                            axisTick: {
	                                show: false
	                            }, */
	                            //隐藏坐标线
	                            /* axisLine: {
	                                show: false,
	                                lineStyle: {
	                                    color: '#000000'
	                                }
	                            }, */
	                        },
							series: [
								{
									name: '监管信息总数',
									type: 'bar',
									data: dac
								}

							]
						});
					}
				})
                    window.onresize = () => {
                        zzteachbarChart.resize();
                    }

                },
                //饼图监管行为
                behaviorpieChart() {
					var $this = this;                    
					axios({
						method: 'get',
						url: appBaseUrl + '/getTotal/mapyear',
						params:{
							year:$this.fileYear
						}
					})
					.then(response => {
						let data = response.data;

						if(data.code == 200) {
							var dataList= JSON.parse(data.data);
							// pieChart1.hideLoading(); // 隐藏加载动画
							var behaviorpieChart = echarts.init(document.getElementById('behaviorpiechart'));
							behaviorpieChart.setOption({
								title: {
									text: '监管信息',
									left: 'center',
									top: 10
								},
								tooltip: {
		                            trigger: 'item',
		                            formatter: '{a} <br/>{b} : {c} ({d}%)'
		                        },
		                        legend: {
		                        	type: 'scroll',
		                            orient: 'vertical',
		                            x: '10', //可设定图例在左、右、居中
		                            y: '50', //可设定图例在上、下、居中
		                            left: '400',
		                            padding: [10, 50, 40, 50],
		                            /*data: ['北京局', '天津局', '河北局', '山西局', '内蒙古局', '辽宁局']*/
		                        },
								series: [
									{	
										/* name: '访问来源',*/
			                            type: 'pie',
			                            selectedMode: 'single',
			                            radius: '55%',
			                            center: ['60%', '50%'],
			                            label: {
			                                normal: {
			                                    // show: 'false',
			                                    // position: 'inside',
			                                    formatter: '{d}%'
			                                }
			                            },
										name: '信息数量',
										data: dataList, // 数据
										emphasis: {
							                itemStyle: {
							                    shadowBlur: 10,
							                    shadowOffsetX: 0,
							                    shadowColor: 'rgba(0, 0, 0, 0.5)'
							                }
							            }
//										itemStyle: {
//			                                emphasis: {
//			                                    shadowBlur: 10,
//			                                    shadowOffsetX: 0,
//			                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
//			                                },
//			                                normal: {
//			                                    color: function(params) {
//			                                        //自定义颜色
//			                                        var colorList = [
//			                                            '#FACC14', '#223273', '#8543E0', '#1890FF', '#2FC25B', '#00fffe'
//			                                        ];
//			                                        return colorList[params.dataIndex]
//			                                    }
//			                                }
//			                            }
									}
								]
							})
						} else {
							this.$message.error(data.msg);
						}
					})
					.catch(function(error) {
							console.log(error);
					});

                    window.onresize = () => {
                        behaviorpieChart.resize();
                    }

                },
                //饼图监管对象
                objectpiechart(){
					var $this = this;					
					axios({
						method: 'get',
						url: appBaseUrl + '/getTotal/mapyear',
						params:{
							year:$this.fileYear
						}
					})
					.then(response => {
						let data = response.data;
						
						if(data.code == 200) {
							var dataList= JSON.parse(data.data);
							// pieChart1.hideLoading(); // 隐藏加载动画
							console.log(dataList)
							var objectpieChart = echarts.init(document.getElementById('objectpiechart'));
							objectpieChart.setOption({
								title: {
									text: '监管信息',
									left: 'center',
									top: 10
								},
								tooltip: {
		                            trigger: 'item',
		                            formatter: '{a} <br/>{b} : {c} ({d}%)'
		                        },
		                        legend: {
		                        	type: 'scroll',
		                            orient: 'vertical',
		                            x: '10', //可设定图例在左、右、居中
		                            y: '50', //可设定图例在上、下、居中
		                            left: '400',
		                            padding: [10, 50, 40, 50],
		                            /*data: ['北京局', '天津局', '河北局', '山西局', '内蒙古局', '辽宁局']*/
		                        },
								series: [
									{	
										/* name: '访问来源',*/
			                            type: 'pie',
			                            selectedMode: 'single',
			                            radius: '55%',
			                            center: ['60%', '50%'],
			                            label: {
			                                normal: {
			                                    // show: 'false',
			                                    // position: 'inside',
			                                    formatter: '{d}%'
			                                }
			                            },
										name: '信息数量',
										data: dataList, // 数据
										emphasis: {
							                itemStyle: {
							                    shadowBlur: 10,
							                    shadowOffsetX: 0,
							                    shadowColor: 'rgba(0, 0, 0, 0.5)'
							                }
							            }
//										itemStyle: {
//			                                emphasis: {
//			                                    shadowBlur: 10,
//			                                    shadowOffsetX: 0,
//			                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
//			                                },
//			                                normal: {
//			                                    color: function(params) {
//			                                        //自定义颜色
//			                                        var colorList = [
//			                                            '#FACC14', '#223273', '#8543E0', '#1890FF', '#2FC25B', '#00fffe'
//			                                        ];
//			                                        return colorList[params.dataIndex]
//			                                    }
//			                                }
//			                            }
									}
								]
							})
							window.onresize = () => {
		                      objectpieChart.resize();
		                  	}     
						} else {
							this.$message.error(data.msg);
						}
					})
					.catch(function(error) {
							console.log(error);
					});                          
                
                },
                //饼图宣传教育
                teachpiechart(){
					var $this = this;					
					axios({
						method: 'get',
						url: appBaseUrl + '/getTotal/mapyear',
						params:{
							year:$this.fileYear
						}
					})
					.then(response => {
						let data = response.data;
						
						if(data.code == 200) {
							var dataList= JSON.parse(data.data);
							// pieChart1.hideLoading(); // 隐藏加载动画
							console.log(dataList)
							var teachpieChart = echarts.init(document.getElementById('teachpiechart'));
							teachpieChart.setOption({
								title: {
									text: '监管信息',
									left: 'center',
									top: 10
								},
								tooltip: {
		                            trigger: 'item',
		                            formatter: '{a} <br/>{b} : {c} ({d}%)'
		                        },
		                        legend: {
		                        	type: 'scroll',
		                            orient: 'vertical',
		                            x: '10', //可设定图例在左、右、居中
		                            y: '50', //可设定图例在上、下、居中
		                            left: '400',
		                            padding: [10, 50, 40, 50],
		                            /*data: ['北京局', '天津局', '河北局', '山西局', '内蒙古局', '辽宁局']*/
		                        },
								series: [
									{	
										/* name: '访问来源',*/
			                            type: 'pie',
			                            selectedMode: 'single',
			                            radius: '55%',
			                            center: ['60%', '50%'],
			                            label: {
			                                normal: {
			                                    // show: 'false',
			                                    // position: 'inside',
			                                    formatter: '{d}%'
			                                }
			                            },
										name: '信息数量',
										data: dataList, // 数据
										emphasis: {
							                itemStyle: {
							                    shadowBlur: 10,
							                    shadowOffsetX: 0,
							                    shadowColor: 'rgba(0, 0, 0, 0.5)'
							                }
							            }
//										itemStyle: {
//			                                emphasis: {
//			                                    shadowBlur: 10,
//			                                    shadowOffsetX: 0,
//			                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
//			                                },
//			                                normal: {
//			                                    color: function(params) {
//			                                        //自定义颜色
//			                                        var colorList = [
//			                                            '#FACC14', '#223273', '#8543E0', '#1890FF', '#2FC25B', '#00fffe'
//			                                        ];
//			                                        return colorList[params.dataIndex]
//			                                    }
//			                                }
//			                            }
									}
								]
							})
						} else {
							this.$message.error(data.msg);
						}
					})
					.catch(function(error) {
							console.log(error);
					});

                  window.onresize = () => {
                      teachpieChart.resize();
                  }                    
                
                },
                changeYear() {
                    if(this.selectedBtn == 0){
                        this.$nextTick(() => {
                            this.mapFn(); // 加载地图图表
                        });
                    }else if(this.selectedBtn == 1){
                        this.$nextTick(() => {
                            this.behaviorpieChart(); // 加载监管行为饼状图图表
                            this.objectpiechart(); //加载监管对象饼图
                            this.teachpiechart(); //加载宣传教育饼图
                        });
                    }else if(this.selectedBtn == 2){
                        this.$nextTick(() => {
                            this.zzbehaviorbarChart(); // 加载监管行为柱状图图表
                            this.zzobjectbarChart(); // 加载监管对象柱状图图表
							this.zzteachbarChart(); // 加载宣传教育柱状图图表
                        });
                    }
                    /* return mapFn(); */
                },
                changeWidth(tab){
                    this.selectedBtn = tab;
                    if(tab == 0){
                        this.$nextTick(() => {
                            this.mapFn(); // 加载地图图表
						});
					}else if(tab == 1){
						this.$nextTick(() => {
							this.behaviorpieChart(); // 加载监管行为饼状图图表
							this.objectpiechart(); //加载监管对象饼图
							this.teachpiechart(); //加载宣传教育饼图
						});
					}else if(tab == 2){
						this.$nextTick(() => {
							this.zzbehaviorbarChart(); // 加载监管行为柱状图图表
							this.zzobjectbarChart(); // 加载监管对象柱状图图表
							this.zzteachbarChart(); // 加载宣传教育柱状图图表
						});
                    }
                },
                tbhandleClick(tab) {
			        console.log(tab.name);
			        this.tbactiveName = tab.name;
//			        if(tab.name == '1'){
//			        	this.$nextTick(() => {
//			        		this.behaviorpieChart(); // 加载饼状图图表
//			        	})
//			        	
//			        }else if(tab.name == '2'){
//			        	this.$nextTick(() => {
//			        		this.objectpiechart(); //加载监管对象饼图
//			        	})
//			        	
//			        }else if(tab.name == '3'){
//			        	this.$nextTick(() => {
//			        		this.teachpiechart(); //加载宣传教育饼图
//			        	})
//			        }
		      	}
            }
		})
	</script>
</html>
